<template>
	<view class="menu">
		<view class="position">
			<view class="search" @tap="$Router.push({path:'/pages/other/search',query: { type: 'menu' }})">
				<image src="../../static/img/search.png" mode=""></image>
				<text>搜索</text>
			</view>
		</view>
		<view class="menu-list">
			<scroll-view scroll-y="true" class="scroll-left" :style="{ height: wh + 'px' }">
				<view :class="['scroll-view-item', active === i ? 'active' : '']" v-for="(item,i) in leftList" :key="i"
					@tap="activeClick(i)">{{item.name}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-right" :style="{ height: wh + 'px' }">
				<view class="scroll-view-item_">
					<image class="img" src="../../static/img/big_1.png" mode=""></image>
					<view class="goods-list">
						<!-- <t-mini-card :isStatus="true"></t-mini-card> -->
						<view class="card-item" v-for="(item,i) in miniCartList" :key="i"
							@tap="$Router.push({path: '/pages/goods/goods_detail', query: {from: 'menu'}})">
							<view class="img_">
								<image class="left-img" :src="item.image + ''" mode=""></image>
							</view>
							<view class="right-content">
								<view class="title">{{item.title}}</view>
								<view class="price">
									<view class="icon">￥</view>
									<view class="money">{{item.money}}</view>
								</view>
								<view class="price-btn">
									<view class="num">仅剩{{item.num}}件</view>
									<view class="btn__">
										<image class="img__" src="../../static/img/cart.png" mode=""></image>
									</view>

								</view>

							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iptValue: '',
				wh: '',
				active: 0,
				leftList: [{
						name: '男生'
					},
					{
						name: '女生'
					},
					{
						name: '冬装'
					},
					{
						name: '毛衣毛裤'
					},
					{
						name: '夏季凉衣'
					},
					{
						name: '保温马靴'
					}
				],
				miniCartList: [{
						title: '2022夏季女装甜美方领蝴蝶结2022夏季女装甜美方领蝴蝶结',
						num: 9,
						money: 188,
						image: "../../static/img/goods_1.png"
					},
					{
						title: '2022夏季女装甜美方领蝴蝶结2022夏季女装甜美方领蝴蝶结',
						num: 10,
						money: 199,
						image: '../../static/img/goods_2.png'
					},
					{
						title: '2022夏季女装甜美方领蝴蝶结2022夏季女装甜美方领蝴蝶结',
						num: 10,
						money: 199,
						image: '../../static/img/goods_2.png'
					},
					{
						title: '2022夏季女装甜美方领蝴蝶结2022夏季女装甜美方领蝴蝶结',
						num: 10,
						money: 199,
						image: '../../static/img/goods_2.png'
					},
					{
						title: '2022夏季女装甜美方领蝴蝶结2022夏季女装甜美方领蝴蝶结',
						num: 10,
						money: 199,
						image: '../../static/img/goods_2.png'
					}
				]
			};
		},
		onLoad() {
			const system = uni.getSystemInfoSync()
			this.wh = system.windowHeight - 78
		},
		methods: {
			searchClick() {},
			activeClick(i) {
				this.active = i
			}
		}
	}
</script>

<style lang="scss">
	.position {
		position: relative;
		width: 100%;
		height: 150rpx;
		background-color: #fff;

		.search {
			position: absolute;
			top: 76rpx;
			left: 50%;
			width: 95%;
			height: 60rpx;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 30rpx;
			z-index: 999;
			display: flex;
			align-items: center;
			border: 1px solid #efebeb;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 15rpx;
				margin-left: 36rpx;
			}

			text {
				font-size: 28rpx;
				color: #c0c0c0;
			}
		}

	}

	.menu-list {
		display: flex;
		margin-top: 20rpx;

		.scroll-left {
			width: 20%;
			background-color: #efefef;

			.scroll-view-item {
				height: 75rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				&.active {
					position: relative;
					background-color: #fff;
					// color: #fff;
					font-size: 26rpx;
					font-weight: bold;
					&:before {
						content: '';
						display: block;
						width: 8rpx;
						height: 30rpx;
						background-color: #ff0000;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
			}
		}

		.scroll-right {
			width: 75%;
			margin: 0 20rpx;
			.scroll-view-item_ {
				padding-bottom: 100rpx;
				.img {
					width: 100%;
					height: 220rpx;
					border-radius: 6rpx;
					margin-bottom: 25rpx;
					overflow: hidden;
				}

				.goods-list {
					.card-item {
						background-color: #fff;
						display: flex;
						border-radius: 10rpx;
						overflow: hidden;
						margin-bottom: 20rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.img_ {
							width: 200rpx;
							height: 200rpx;
							margin-right: 28rpx;
							background-color: #ccc;

							.left-img {
								width: 100%;
								height: 100%;
							}
						}

						.right-content {
							height: 100%;
							width: 55%;

							.title {
								width: 290rpx;
								font-size: 24rpx;
								font-weight: bold;
								letter-spacing: 1rpx;
								color: #333333;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								margin-top: 29rpx;
							}

							.num {
								font-size: 20rpx;
								letter-spacing: 2rpx;
								color: #989898;
							}

							.price {
								display: flex;
								align-items: center;
								margin: 10rpx 0 32rpx 0;

								.icon {
									font-weight: bold;
									font-size: 24rpx;
									letter-spacing: 2rpx;
									color: #ff0000;
								}

								.money {
									font-size: 30rpx;
									font-weight: bold;
									letter-spacing: 1rpx;
									color: #ff0000;
								}
							}

							.price-btn {
								display: flex;
								justify-content: space-between;
								align-items: center;



								.btn {
									position: relative;
									display: flex;
									align-items: center;
									padding-left: 15rpx;
									width: 160rpx;
									height: 51rpx;

									.img_ {
										width: 100%;
										height: 100%;
									}

									.text_1 {
										position: absolute;
										left: 30rpx;
										top: 50%;
										transform: translateY(-50%);
										font-size: 22rpx;
										color: #ffffff;
									}
								}

								.btn__ {
									.img__ {
										width: 40rpx;
										height: 40rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
